<template>
<div>
  <v-navigation-drawer v-model="drawer" disable-resize-watcher
      fixed
      app>
      <v-list class="" two-line>
        <v-list-tile v-for="item in menuList" :key="item.title" :to="item.link">
          <!-- <v-list-tile-action>
            <v-icon color="primary">check</v-icon>
          </v-list-tile-action> -->
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            <v-list-tile-sub-title>{{item.fullname}}</v-list-tile-sub-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
  <v-toolbar fixed app dense>
    <v-toolbar-side-icon class="hidden-md-and-up" @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title>
      <span class="subheading">{{title}}</span>
    </v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat large v-for="(item, index) in menuList" :key="index" :to="item.link">{{item.title}}</v-btn>
    </v-toolbar-items>
    <v-menu class="hidden-md-and-up">
      <!-- <v-btn slot="activator" icon>
        <v-icon>share</v-icon>
      </v-btn> -->
      <!-- <v-list>
        <v-list-tile v-for="(item, index) in menuList" :key="index">
          <v-list-tile-title>{{item.title}}</v-list-tile-title>
        </v-list-tile>
      </v-list> -->
    </v-menu>
  </v-toolbar>
</div>
</template>
<script>
import MenuLIst from '@/config/category'
export default {
  name: 'PublicMenu',
  data () {
    return {
      title: '首届山西非物质文化遗产博览会',
      drawer: false,
      menuList: MenuLIst
    }
  },
  created: function () {
  }
}
</script>
